<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">文章列表</div>
      <ul class="articles-list-type">
        <li>状态</li>
        <li
          v-for="(item,index) in articlesStatus"
          :key="index"
          :class="{'active-status':activeStatus === item.value}"
          @click="articlesStatusClick(index,item)"
        >{{ item.name }}
        </li>
      </ul>
      <div class="articles-list-search-group">
        <div>
          <el-button type="danger" size="small" :disabled=" selectedData.length === 0" icon="el-icon-delete" @click="batchDeletionVisible = true">批量删除</el-button>
        </div>
        <div class="articles-list-search">
          <el-select slot="prepend" v-model="searchArticleParam.articlesType" clearable size="small" placeholder="文章类型" @change="getCurrentData" @clear="clearSearch">
            <el-option label="原创" value="0" />
            <el-option label="翻译" value="2" />
            <el-option label="转载" value="1" />
          </el-select>
          <el-select slot="prepend" v-model="searchArticleParam.articlesCategory" clearable size="small" placeholder="文章分类" @change="getCurrentData" @clear="clearSearch">
            <el-option v-for=" categorie in categoriesSelect" :key="categorie.id" :label="categorie.categorie_name" :value="categorie.id" />
          </el-select>
          <div><el-input v-model="search" class="search" size="small" placeholder="请输入文章名称" clearable @clear="clearSearch" /> </div>
        </div>
        <div><el-button
          class="search-btn"
          size="small"
          type="primary"
          icon="el-icon-search"
          :disabled="searchBtnDisabled"
          @click="getSearchCurrentData"
        >搜索</el-button></div>
      </div>
      <div class="articles-list-table">
        <el-table
          :data="articlesList"
          border
          style="width: 100%"
          @select="handleSelection"
          @select-all="handleAllSelection"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            prop="articles_image_url"
            width="180"
            label="文章封面"
          >
            <template slot-scope="scope">
              <div class="articles-image-column">
                <i class="article-image-icon" :class="articlesListConfigParam.iconParam[scope.row.articles_status]" />
                <el-image
                  style="width: 159px; height: 90px"
                  :src="scope.row.articles_image_url"
                  :preview-src-list="[scope.row.articles_image_url]"
                  fit="fill"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="articles_title"
            label="文章标题"
          />
          <el-table-column
            align="center"
            prop="categorie"
            label="分类"
          >
            <template slot-scope="scope">
              {{ scope.row.categorie.categorie_name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="tags"
            label="标签"
          >
            <template slot-scope="scope">
              <el-tag v-for="(tag,index) in scope.row.tags" :key="index" style="margin: 0 2px">{{ tag.tag_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="reading_quantity"
            width="80"
            label="浏览量"
          />

          <el-table-column
            align="center"
            prop="comment_count"
            width="80"
            label="评论数"
          />

          <el-table-column
            align="center"
            prop="tags"
            label="类型"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag :type="articlesListConfigParam.articlesTypeColor[scope.row.articles_type]">
                {{ articlesListConfigParam.articlesTypename[[scope.row.articles_type]] }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
          />
          <el-table-column
            align="center"
            prop="topping"
            width="80"
            label="置顶"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.articles_is_topping"
                :active-value="1"
                :inactive-value="0"
                active-color="#409eff"
                :disabled="toppingDisabled"
                @change="updateToppingStatus(scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" style="margin-right: 10px" @click="updateArticles(scope.row.id)">修改</el-button>
              <el-popconfirm
                title="确定删除吗?"
                icon="el-icon-info"
                icon-color="red"
                @onConfirm="deleteArticles(scope.row.id)"
              >
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="[5,10]"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      :visible.sync="batchDeletionVisible"
      width="20%"
      center
      @close="batchDeletionVisible = false"
    >
      <h2 style="text-align: center">确定要删除这些分类吗?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchDeletionVisible = false">取 消</el-button>
        <el-button type="danger" @click="batchDeleteArticles">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCategories } from '@/api/categories'
import { deleteArticlesApi } from '@/api/articles'
import { getArticleListApi, updateToppingStatusApi, deleteArticleListApi } from '@/api/articleslist'
import PagerMixin from '@/components/mixins/PagerMixin'
import { Message } from 'element-ui'

export default {
  name: 'ArticlesList',
  mixins: [PagerMixin],
  data() {
    return {
      batchDeletionVisible: false,
      activeStatus: -1,
      articlesStatus: [
        { name: '全部', value: -1 },
        { name: '发布', value: 0 },
        { name: '隐藏', value: 2 },
        { name: '回收站', value: 1 }
      ],
      searchArticleParam: {
        articlesType: '',
        articlesCategory: ''
      },
      categoriesSelect: [],
      articlesList: [],
      selectedData: [],
      articlesListConfigParam: {
        iconParam: {
          '0': 'el-icon-view',
          '1': 'el-icon-delete',
          '2': 'el-icon-lock'
        },
        articlesTypeColor: {
          '0': 'danger',
          '1': 'success',
          '2': 'warning'
        },
        articlesTypename: {
          '0': '原创',
          '1': '转载',
          '2': '翻译'
        }
      },
      toppingDisabled: false
    }
  },
  computed: {
    searchBtnDisabled() {
      return Boolean(this.search.length === 0 & this.searchArticleParam.articlesCategory.length === 0 & this.searchArticleParam.articlesType.length === 0)
    }
  },
  created() {
    this.getCurrentData()
    this.getCategoriesData()
  },
  methods: {
    getCategoriesData() {
      getCategories({ articlelist: 'articlelist' }).then(resp => {
        this.categoriesSelect = resp.data
      })
    },
    getCurrentData() {
      const params = this.getPageParams()
      if (this.activeStatus !== -1) {
        params.articles_status = this.activeStatus
      }
      if (this.searchArticleParam.articlesCategory !== '') {
        params.categorie = this.searchArticleParam.articlesCategory
      }
      if (this.searchArticleParam.articlesType !== '') {
        params.articles_type = this.searchArticleParam.articlesType
      }
      getArticleListApi(params).then(resp => {
        this.getPageConfig(resp)
        this.articlesList = resp.data.result
      })
    },
    articlesStatusClick(index, item) {
      this.activeStatus = item.value
      this.getCurrentData()
    },
    handleSelection(selection, row) { // 表格数据被选中触发
      this.selectedData = selection
    },
    handleAllSelection(selection) { // 表格数据全选触发
      this.selectedData = selection
    },
    updateArticles(id) {
      this.$router.replace('/articles/update?id=' + id)
    },
    deleteArticles(id) {
      deleteArticlesApi({ id: id }).then(resp => {
        Message({
          message: '删除文章成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.getCurrentData()
      })
    },
    updateToppingStatus(row) {
      this.toppingDisabled = true
      updateToppingStatusApi({ id: row.id, articles_is_topping: row.articles_is_topping }).then(resp => {
        Message({
          message: '修改置顶状态成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.toppingDisabled = false
      }).catch(error => {
        console.log(error)
        this.toppingDisabled = false
      })
    },
    batchDeleteArticles() {
      const ids = this.selectedData.map(item => {
        return item.id
      })
      deleteArticleListApi({ ids: ids }).then(resp => {
        Message({
          message: '删除文章成功',
          type: 'success',
          duration: 5 * 1000
        })
        this.selectedData = []
        this.batchDeletionVisible = false
        this.getCurrentData()
      })
    }
  }
}
</script>

<style lang="less">
  .active-status {
    font-weight: 700;
    border-bottom: 1px solid #000000;
  }

  .articles-list-type {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    font-size: 0.9rem;

    li {
      padding: 5px 30px;
    }

    & li:first-child {
      padding-left: 8px;
      border-left: 3px solid #20a0ff;
    }

    li:nth-child(n+2) {
      cursor: pointer;
      margin: 0 5px;
    }
  }

  .articles-list-search-group {
    display: flex;
    margin-top: 25px;

    .articles-list-search {
      flex: 0.8;
      display: flex;
      justify-content: space-evenly;
      &>* {
        max-width: 280px;
        margin: 0 10px;
        flex: 1;
      }

    }
    .search-btn{
      margin-left: 10px;
      min-width: 120px;
    }
  }

  .articles-list-table {
    margin-top: 25px;

    .articles-image-column {
      position: relative;
      .el-image {
        border-radius: 5px!important;
      }
      .article-image-icon {
        z-index: 9;
        color: #ffffff;
        font-size: 1.7rem;
        right:10px;
        bottom: 10px;
        position: absolute;
      }
    }
  }

  .paging-container {

    margin-top: 25px;
    padding-bottom: 30px;

    & > div:first-child {
      float: right;
    }
  }
</style>

